<template>
  <div id="product-specifications-box">
     <div class="content">
       <div class="row" v-for="(item,index) in currList">
         <div class="left">
           <span class="name">名称: </span> <el-input type="text" v-model="item.name" @change="checkList" maxlength="500"/>
         </div>
         <div class="right">
           <span class="name">值: </span> <el-input type="text" v-model="item.value" @change="checkList" maxlength="500"/>
         </div>
         <div class="act">
           <button @click="remove(index)" type="button">删除</button>
         </div>
         <div class="c"></div>
       </div>
       <div class="row" style="width: 490px; text-align: center">
<!--         <button type="button" @click="confirm">确认</button>-->
         <button type="button" @click="addEmpty">新增</button>
       </div>
       <div class="c"></div>
     </div>



      <div class="tip-box">
        <div>
          如:  体积: 150cm*100cm*50cm
        </div>
        <div>
          【名称】->体积，【值】 -> 150cm*100cm*50cm
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'ProductSpecificationsBox',
  props:{
    initCurrList:Array,
    callBack:Function
  },
  data:function () {
    return {
      currList:[]
    }
  },
  mounted () {
  },
  methods:{
    // 设置列表
    setList:function (initList) {
      this.currList = initList
      this.checkList()
      this.$forceUpdate()
    },
    // 移除单行
    remove:function (index) {
      if (this.currList.length>0){
        this.currList.splice(index,1)
      }
      this.checkList()
    },
    // 增加空行
    addEmpty:function () {
      var lastOne=this.currList[this.currList.length-1]
      if (this.currList.length>=10){
        return this.$message.error("最大添加10行")
      }
      this.currList=this.currList.concat({
        name:'',value:''
      })
    },
    // 确认提交
    checkList:function () {
      var arr=[]
      this.currList.forEach(function (item,index) {
        if (item.name && item.value){
          arr.push(item)
        }
      })
      if (typeof this.callBack==='function'){
        this.callBack(arr)
      }
    }
  }
}
</script>

<style scoped>

</style>
